
<!DOCTYPE html>
<html style="height: 100%">
<head>
    <meta charset="utf-8">
    <style>
        .comuno{
            position: absolute;
            left: 1%;
            width: 25%;
            flex-direction: column;
        }
        .comuno-1{
            position: absolute;
            left: 13%;
            flex-direction: column;

        }
        .comuno-2{
            position: absolute;
            left: 24%;
            flex-direction: column;

        }
        .comuno-3{
            position: absolute;
            left: 37%;
            flex-direction: column;

        }
        .comuno-4{
            position: absolute;
            left: 47%;
            flex-direction: column;

        }
        .comuno-5{
            position: absolute;
            right: 5%;
            flex-direction: row;
        }
        .comuno-6{
            position: absolute;
            left: 56%;
            width: 30%;
            flex-direction: column;
        }
        .comuno-7{
            position: absolute;
            left: 72%;
            width: 30%;
            flex-direction: column;
        }
        .top{
            background-color: white;
            width: 100%;
            position: absolute;
            top: 4%;
            flex-direction: row;
        }
        .text{
            color: #999999;
            font-size: 20px;
            font-weight: 500;
        }

        .text-1{
            color: #999999;
            font-size: 13px;
        }
        .text-2{
            margin-left: 4%;
            color: #4aab72;
            font-size: 21px;
        }
    </style>
</head>
<body  style="height: 100%; margin: 0">

<div class="text-1">单位:千克(KG):</div>
<div id="page" class="top">
<div  class="top">
    <div class="comuno" v-for="item in type ">
        <div class="text" >PET瓶<span v-if='item.tyepC==0'>:{{item.num}}</span></div>
        <div class="text">PE瓶<span v-if='item.tyepC==1'>:{{item.num}}</span></div>
        <div class="text">硬质塑料<span v-if='item.tyepC==3'>:{{item.num}}</span></div>
    </div>
    <div class="comuno-1" v-for="item in type ">
        <div class="text">塑料袋膜<span v-if='item.tyepC==4'>:{{item.num}}</span></div>
        <div class="text">泡沫<span v-if='item.tyepC==2'>:{{item.num}}</span></div>
        <div class="text">玻璃<span v-if='item.tyepC==6'>:{{item.num}}</span></div>
    </div>
    <div class="comuno-2" v-for="item in type ">
        <div class="text">复合<span v-if='item.tyepC==7'>:{{item.num}}</span></div>
        <div class="text">织物<span v-if='item.tyepC==5'>:{{item.num}}</span></div>
        <div class="text">电子电器<span v-if='item.tyepC==8'>:{{item.num}}</span></div>
    </div>
    <div class="comuno-3" v-for="item in type ">
        <div class="text">书报<span v-if='item.tyepC==9'>:{{item.num}}</span></div>
        <div class="text">黄纸板<span v-if='item.tyepC==13'>:{{item.num}}</span></div>
        <div class="text">综合纸<span v-if='item.tyepC==10'>:{{item.num}}</span></div>
    </div>
    <div class="comuno-4" v-for="item in type ">
        <div class="text">铝拉罐<span v-if='item.tyepC==12'>:{{item.num}}</span></div>
        <div class="text">金属<span v-if='item.tyepC==11'>:{{item.num}}</span></div>
        <div class="text"></div>
    </div>

    <div class="comuno-6">
        <div ><span class="text-2">减少砍伐{{epvalue.tree}}(棵)</span></div>
        <div > <span class="text-2">减少石油{{epvalue.oil}}(吨)</span></div>
        <div ><span class="text-2">减少碳排放{{epvalue.carbonDioxide}}(吨)</span></div>
    </div>
    <div class="comuno-7">
        <div><span class="text-2">节约土地{{epvalue.land}}(m3)</span></div>
    </div>


</div>
</div>

<div id="container" style="height: 100%;margin-top: 10%"></div>


<script type="text/javascript" src="https://libs.baidu.com/jquery/2.1.1/jquery.min.js"></script>
<script type="text/javascript" src="https://echarts.baidu.com/gallery/vendors/echarts/echarts.min.js"></script>
<script type="text/javascript" src="https://echarts.baidu.com/gallery/vendors/echarts-gl/echarts-gl.min.js"></script>
<script type="text/javascript" src="https://echarts.baidu.com/gallery/vendors/echarts-stat/ecStat.min.js"></script>
<script type="text/javascript" src="https://echarts.baidu.com/gallery/vendors/echarts/extension/dataTool.min.js"></script>
<script type="text/javascript" src="https://echarts.baidu.com/gallery/vendors/echarts/map/js/china.js"></script>
<script type="text/javascript" src="https://echarts.baidu.com/gallery/vendors/echarts/map/js/world.js"></script>
<script type="text/javascript" src="https://echarts.baidu.com/gallery/vendors/echarts/extension/bmap.min.js"></script>
<script type="text/javascript" src="https://echarts.baidu.com/gallery/vendors/simplex.js"></script>
<script type="text/javascript" src="vue/vue-2.4.0.js"></script>
<script type="text/javascript" src="vue/vue-resource-1.3.4.js"></script>
<!--<script type="text/javascript" src="/assets/js/vue/vue-resource-1.3.4.js"></script>-->
<script type="text/javascript">
    var dom = document.getElementById("container");
    var myChart = echarts.init(dom);
    var app = {};
    option = null;
    app.title = '嵌套环形图';


    //设置echarts value





    option = {
        tooltip: {
            trigger: 'item',
            formatter: "{a} <br/>{b}: {c} ({d}%)"
        },
        legend: {
            orient: 'vertical',
            x: 'left',
            data:['PET瓶','PE瓶','泡沫','硬质塑料','塑料袋膜','织物','玻璃','混合','电子电器','书报','黄纸板','','','']
        },
        series: [
            {
                name:'投放总计(T)',
                type:'pie',
                selectedMode: 'single',
                radius: [0, '30%'],

                label: {
                    normal: {
                        position: 'inner'
                    }
                },
                labelLine: {
                    normal: {
                        show: false
                    }
                },
                data:[
                    {value:335, name:'综合纸', selected:true},
                    {value:679, name:'铝拉罐'},
                    {value:1548, name:'金属'}
                ]
            },
            {
                name:'投放总计(T)',
                type:'pie',
                radius: ['40%', '55%'],
                label: {
                    normal: {
                        formatter: '{a|{a}}{abg|}\n{hr|}\n  {b|{b}：}{c}  {per|{d}%}  ',
                        backgroundColor: '#eee',
                        borderColor: '#aaa',
                        borderWidth: 1,
                        borderRadius: 4,
                        // shadowBlur:3,
                        // shadowOffsetX: 2,
                        // shadowOffsetY: 2,
                        // shadowColor: '#999',
                        // padding: [0, 7],
                        rich: {
                            a: {
                                color: '#999',
                                lineHeight: 22,
                                align: 'center'
                            },
                            // abg: {
                            //     backgroundColor: '#333',
                            //     width: '100%',
                            //     align: 'right',
                            //     height: 22,
                            //     borderRadius: [4, 4, 0, 0]
                            // },
                            hr: {
                                borderColor: '#aaa',
                                width: '100%',
                                borderWidth: 0.5,
                                height: 0
                            },
                            b: {
                                fontSize: 16,
                                lineHeight: 33
                            },
                            per: {
                                color: '#eee',
                                backgroundColor: '#334455',
                                padding: [2, 4],
                                borderRadius: 2
                            }
                        }
                    }
                },
                data:[
                    {value:335, name:'PET瓶'},
                    {value:310, name:'PE瓶'},
                    {value:234, name:'泡沫'},
                    {value:135, name:'硬质塑料'},
                    {value:108, name:'塑料袋膜'},
                    {value:251, name:'织物'},
                    {value:147, name:'玻璃'},
                    {value:102, name:'混合'},
                    {value:102, name:'电子电器'},
                    {value:102, name:'书报'},
                    {value:102, name:'黄纸板'}
                ]
            }
        ]
    };;
    if (option && typeof option === "object") {
        myChart.setOption(option, true);
    }


    var vue = new Vue({
        el:'#page',
        data:{
            epvalue:Object,
            type:Object,
        },
        methods:{
            log() {
                console.log("1234567890");
            },
        },
        created(){
            this.$http.get('../echarts').then(function (result) {
                // 通过 result.body 拿到服务器返回的成功的数据
                var data = result.body;
                console.log(data);

                this.epvalue = data.epvalue;
                this.type = data.wasteData;

                var namearr = new Array();
                var arr = new Array();
                var maxArr = new Array();
                for (var i = 0; i <data.wasteData.length ; i++) {
                    namearr.push(data.wasteData[i].name) ;
                    var obj = {value:data.wasteData[i].num,name:data.wasteData[i].name};
                    arr.push(obj);
                }
                for (var i = 0; i <data.wasteMax.length ; i++) {
                    var obj =  {value:data.wasteMax[i].num,name:data.wasteData[i].name};
                    maxArr.push(obj);
                }

                myChart.setOption(
                    {

                        tooltip: {
                            trigger: 'item',
                            formatter: "{a} <br/>{b}: {c} ({d}%)"
                        },
                        legend: {
                            orient: 'vertical',
                            x: 'left',
                            data:namearr
                        },
                        series: [
                            {
                                name:'投放总计(T)',
                                type:'pie',
                                selectedMode: 'single',
                                radius: [0, '30%'],

                                label: {
                                    normal: {
                                        position: 'inner'
                                    }
                                },
                                labelLine: {
                                    normal: {
                                        show: false
                                    }
                                },
                                data:maxArr
                            },
                            {
                                name:'投放总计(T)',
                                type:'pie',
                                radius: ['40%', '55%'],
                                label: {
                                    normal: {
                                        formatter: '{a|{a}}{abg|}\n{hr|}\n  {b|{b}：}{c}  {per|{d}%}  ',
                                        backgroundColor: '#eee',
                                        borderColor: '#aaa',
                                        borderWidth: 1,
                                        borderRadius: 4,
                                        // shadowBlur:3,
                                        // shadowOffsetX: 2,
                                        // shadowOffsetY: 2,
                                        // shadowColor: '#999',
                                        // padding: [0, 7],
                                        rich: {
                                            a: {
                                                color: '#999',
                                                lineHeight: 22,
                                                align: 'center'
                                            },
                                            // abg: {
                                            //     backgroundColor: '#333',
                                            //     width: '100%',
                                            //     align: 'right',
                                            //     height: 22,
                                            //     borderRadius: [4, 4, 0, 0]
                                            // },
                                            hr: {
                                                borderColor: '#aaa',
                                                width: '100%',
                                                borderWidth: 0.5,
                                                height: 0
                                            },
                                            b: {
                                                fontSize: 16,
                                                lineHeight: 33
                                            },
                                            per: {
                                                color: '#eee',
                                                backgroundColor: '#334455',
                                                padding: [2, 4],
                                                borderRadius: 2
                                            }
                                        }
                                    }
                                },
                                data:arr
                            }
                        ]
                    }
                )


            })


        }
    });
</script>
</body>
</html>